<template>
  <div>
    <v-tableTitle :btnConfig="btnConfig" :tableSelectData="tableSelectData" :title="$t('router.deptSetting')" @del="del" @newCreate="newCreate"></v-tableTitle>
    <GTable ref="table" :hasCheck="true" :hasEdit="true" api="/v1/plDepartment/selectPlDepartmentList" :columnSource="baseColumns" :cbFun="cbFun"
      @selection-change="data => tableSelectData = data" @setdialog="setdialog" />

    <el-dialog :title="dialogModule.title" :visible.sync="dialogModule.flag" center v-dialogDrag width="550px">
      <div v-tit="$t('router.deptInfo')">
        <GForm ref="detail" :config="formConfig" :rules="formRules" v-model="form"></GForm>
      </div>
      <span slot="footer">
        <el-button type="primary" @click="handleConfirm">确定</el-button>
        <el-button @click="dialogModule.flag = false">取消</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import tableTitle from 'commons/TableTitle'

export default {
  name: 'dept',
  data() {
    return {
      tableSelectData: [],
      dialogModule: {
        loading: false,
        flag: false,
        title: '',
        data: null,
        type: ''
      },
      form: {
        companyId: null,
        deptNo: null,
        deptName: null,
        deptPic: null,
        deptTel: null,
        deptAddr: null,
        shortNum: null,
        remark: null
      },
      companyList: []
    }
  },
  computed: {
    btnConfig() {
      return [
        {
          label: this.$t('common.create'),
          // certigier: !this.btnPermNameList.includes('EN010101'),
          invalid: 'newCreate'
        },
        {
          label: this.$t('common.delete'),
          // certigier: !this.btnPermNameList.includes('EN010102'),
          disabled: true,
          invalid: 'del'
        }
      ]
    },
    baseColumns() {
      return [
        {
          label: this.$t('config.deptNo'),
          prop: 'deptNo',
          input: 'input'
        },
        {
          label: this.$t('config.departName'),
          prop: 'deptName',
          input: 'input'
        },
        {
          label: this.$t('security.sortCode'),
          prop: 'shortNum'
        },
        {
          label: this.$t('config.contact'),
          prop: 'deptPic'
        },
        {
          label: this.$t('config.phone'),
          prop: 'deptTel'
        },
        {
          label: this.$t('config.address', { no: '' }),
          prop: 'deptAddr'
        }
      ]
    },
    formConfig() {
      return [
        {
          prop: 'companyId',
          type: 'select',
          label: this.$t('config.company'),
          options: this.companyList
        },
        {
          prop: 'deptNo',
          type: 'input',
          label: this.$t('config.deptNo')
        },
        {
          prop: 'deptName',
          type: 'input',
          label: this.$t('config.departName')
        },
        {
          prop: 'deptPic',
          type: 'input',
          label: this.$t('config.contact')
        },
        {
          prop: 'deptTel',
          type: 'input',
          label: this.$t('config.phone')
        },
        {
          prop: 'deptAddr',
          type: 'input',
          label: this.$t('config.address', { no: '' })
        },
        {
          prop: 'shortNum',
          type: 'input',
          label: this.$t('security.sortCode')
        },
        {
          prop: 'remark',
          type: 'textarea',
          label: this.$t('home1.remark')
        }
      ]
    },
    formRules() {
      return {
        companyId: [
          {
            required: true,
            message: this.$selectPlease('config.company'),
            trigger: 'change'
          }
        ],
        deptNo: [
          {
            required: true,
            message: this.$inputPlease('config.deptNo'),
            trigger: 'blur'
          }
        ],
        deptName: [
          {
            required: true,
            message: this.$inputPlease('config.departName'),
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    handleConfirm() {
      this.$refs.detail.validate().then(valid => {
        const params = this._.cloneDeep(this.form)
        let promise
        if (this.dialogModule.type == 'edit') {
          promise = this.$post(
            `/v1/plDepartment/editPlDepartmentById`,
            params
          )
        } else {
          promise = this.$post(`/v1/plDepartment/addPlDepartment`, params)
        }
        promise.then(res => {
          this.$message.success(res.returnMgr)
          this.getTableData()
          this.dialogModule.flag = false
        })
      })
    },
    getDeptInfoById(id) {
      this.$post('/v1/plDepartment/selectPlDepartmentById', {
        id
      }).then(res => {
        this.form = res.data.item
        this.dialogModule.flag = true
      })
    },
    setdialog(data) {
      this.dialogModule.title = `编辑[${data.deptName}]部门信息`
      this.dialogModule.type = 'edit'
      this.dialogModule.data = data
      this.getDeptInfoById(data.id)
    },
    newCreate() {
      this.dialogModule.title = '新增部门信息'
      this.dialogModule.type = 'add'
      this.dialogModule.data = null
      this.form = {
        companyId: null,
        deptNo: null,
        deptName: null,
        deptPic: null,
        deptTel: null,
        deptAddr: null,
        shortNum: null,
        remark: null
      }
      this.dialogModule.flag = true
    },
    //删除
    async del(data) {
      this.$post('/v1/plDepartment/deletePlDepartmentByIds', data).then(
        res => {
          this.$message.success(res.returnMgr)
          this.getTableData()
        }
      )
    },
    getCompanyList() {
      this.$post('/v1/edi/plCompany/selectPlCompany').then(res => {
        this.companyList = res.data.item.map(i => {
          i.label = i.companyName
          i.value = i.id
          return i
        })
      })
    },
    cbFun(res) {
      return { list: res.data.page.records, total: res.data.page.total }
    },
    async getTableData() {
      this.$refs.table.getTableData()
    }
    //设置弹框
  },
  mounted() {
    this.getCompanyList()
  },
  components: {
    'v-tableTitle': tableTitle
  }
}
</script>

<style scoped>
</style>
